<template>
  <div class="background-image">
    <div class="content">
      <div class="main">
        <div class="left"></div>
        <div class="right">
          <div class="img">
            <img src="../../assets/NJUST.jpeg" />
          </div>
          <div class="choose">
            <ul>
              <li class="li1">
                <router-link to="/login"><span>支持人员</span></router-link>
              </li>
              <li class="li2">
                <router-link to="/login2"><span>检测人员</span></router-link>
              </li>
            </ul>
          </div>
          <div class="con">
            <form @submit.prevent="validateForm">
              <div class="text">
                <table class="table">
                  <tr>
                    <td><a>用户名:</a></td>
                    <td>
                      <input
                        type="text"
                        v-model="username"
                        class="input"
                        placeholder="请输入您的用户名"
                      />
                      <div v-if="errors.username" class="error">
                        {{ errors.username }}
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td><a>密 码:</a></td>
                    <td>
                      <input
                        type="password"
                        v-model="password"
                        class="input"
                        placeholder="请输入密码"
                      />
                      <div v-if="errors.password" class="error">
                        {{ errors.password }}
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td><a>验证码:</a></td>
                    <td>
                      <input
                        type="text"
                        v-model="verificationCode"
                        class="input"
                        placeholder="请输入验证码"
                      />
                      <div v-if="errors.verificationCode" class="error">
                        {{ errors.verificationCode }}
                      </div>
                    </td>
                    <td>
                      <div id="code" @click="createCode" class="pseudo-button">
                        <span
                          v-for="(char, index) in code"
                          :key="index"
                          :style="{ color: codeColors[index] }"
                          >{{ char }}</span
                        >
                      </div>
                    </td>
                  </tr>
                </table>
                <div class="forget">
                  <li class="li1">
                    <router-link to="/password"
                      ><span>忘记密码？</span></router-link
                    >
                  </li>
                </div>
                <input type="submit" value="登录" id="submit" class="login" />
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      verificationCode: "",
      code: "",
      errors: {},
      codeColors: [], // 存储每个字符的颜色
    };
  },
  methods: {
    createCode() {
      const codeLength = 4;
      // const random = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'.split('');
      const random = "0123456789".split("");

      this.code = "";
      this.codeColors = []; // 重置颜色数组
      for (let i = 0; i < codeLength; i++) {
        const index = Math.floor(Math.random() * random.length);
        this.code += random[index];
        this.codeColors.push(
          "#" + Math.floor(Math.random() * 16777215).toString(16)
        ); // 生成随机颜色
      }
    },
    validateForm() {
      this.errors = {};
      if (!this.username) {
        this.errors.username = "该项未填写";
      }
      if (!this.password) {
        this.errors.password = "该项未填写";
      }
      if (!this.verificationCode) {
        this.errors.verificationCode = "该项未填写";
      }
      if (this.verificationCode !== this.code) {
        this.errors.verificationCode = "验证码错误";
        this.createCode();
        this.verificationCode = "";
        return;
      }
      if (Object.keys(this.errors).length === 0) {
        console.log(this.username);
        this.$http
          .post("/login", {
            username: this.username,
            password: this.password,
          })
          .then((response) => {
            console.log(response);
            if (response.data == "jHome.html") {
              // window.location.href = 'http://localhost:8080/';
              window.location.href = "http://localhost:9528/"; //改为支持人员主页
            } else if (response.data == "zHome.html") {
              this.$router.push("/dashboard/dash");
            } else if (response.data == "用户名或密码错误") {
              this.errors.verificationCode = "用户名或密码错误";
            }
          })
          .catch((error) => {
            // 处理错误情况
            console.log(error);
          }); // 使用编程式导航跳转到 /dashboard
      }
    },
  },
  mounted() {
    this.createCode();
  },
};
</script>
<style scoped>
.background-image {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff; /* 背景色，可根据需要调整 */
  z-index: 0; /* 背景层 */
}

.background-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../../assets/Register_bg.jpg") center/cover no-repeat;
  z-index: -1; /* 确保伪元素在背景层之下 */
  filter: blur(8px);
}

.content {
  display: flex; /* 使.content成为flex容器 */
  justify-content: center; /* 水平居中main元素 */
  align-items: center; /* 垂直居中main元素 */
  height: 100%; /* 使.content的高度占满其父元素 */
  /* 如果需要，可以设置width: 100%来使.content宽度占满其父元素 */
}

.content .main {
  width: 1000px;
  height: 600px;
  background-color: #ffffff;
  border-radius: 10px;
}

.content .main .left {
  margin: 0;
  padding: 0;
  width: 55%;
  height: 100%;
  background-image: url("../../assets/Register_bg.jpg");
  background-size: cover;
  background-position: 65%;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  float: left;
}

.content .main .right {
  width: 45%;
  height: 100%;
  float: left;
}

.content .main .right .img {
  margin-top: 30px;
  width: 100%;
  height: 10%;
  float: left;
}

.content .main .right .img img {
  margin-left: 25px;
  height: 100px;
  width: 380px;
  float: left;
}

.choose {
  width: 100%;
  margin-top: 50px;
  margin-left: 30px;
  float: left;
}

.choose li {
  float: left;
  list-style: none;
  margin-right: 1px;
}

.choose .li1 a {
  display: block;
  text-decoration: none;
  width: 150px;
  height: 40px;
  text-align: center;
  line-height: 37px;
  background: deepskyblue;
  color: white;
  font-size: 20px;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}

.choose .li2 a {
  display: block;
  text-decoration: none;
  width: 150px;
  height: 40px;
  text-align: center;
  line-height: 37px;
  background: #dfdfdf;
  color: black;
  font-size: 20px;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}

.choose .li2 a:hover {
  background: deepskyblue;
  color: white;
}

.con {
  float: left;
  margin-top: 30px;
  margin-left: 30px;
}

.table a {
  font-family: KaiTi;
  font-size: 25px;
  font-weight: bolder;
}

.input {
  width: 180px;
  padding: 10px;
  border: none;
  border-radius: 4px;
  box-shadow: 2px 2px 7px 0 rgba(0, 0, 0, 0.2);
  outline: none;
  color: dimgray;
}

.text .table {
  width: 400px;
  height: 200px;
  margin-top: 15px;
}

.forget li {
  margin-top: 10px;
  margin-left: 320px;
  float: left;
  color: grey;
  font-size: 16px;
  display: block;
}

.forget a {
  text-decoration: none; /* 去除下划线 */
  color: gray; /* 设置链接颜色，可以是任何你想要的颜色 */
}

.forget a:visited {
  color: gray; /* 访问过的链接颜色保持不变 */
}

.login {
  margin-top: 5%;
  padding-left: 50px;
  padding-right: 30px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
  float: left;
  margin-left: 25%;
  font-size: 25px;
  background-color: #00a2e8;
  color: #ffffff;
  border-radius: 10px;
  border: 1px;
  font-weight: bold;
  letter-spacing: 20px;
}

.login:hover {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
  background-color: #9ed3f0;
  color: black;
  font-weight: bolder;
}

.error {
  color: red;
  font-size: 12px;
  margin-top: 5px;
}

.pseudo-button {
  display: inline-block;
  padding: 6px 12px;
  border: 2px solid #dfdfdf;
  border-radius: 4px; /* 添加圆角边框 */
  background-color: #fff; /* 背景颜色 */
  cursor: pointer; /* 鼠标光标样式 */
  user-select: none; /* 防止文本被选中 */
  /* 以下是每个字符的样式 */
  font-style: italic;
}

.pseudo-button:hover {
  background-color: #f0f0f0; /* 鼠标悬停时的背景颜色 */
  border-color: #ccc; /* 鼠标悬停时的边框颜色 */
}
</style>
